<template>
    <div class="content">
        <TableLayout form-title="">
        <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" :rules="rules" ref="formInline" label-width="80px" slot="form">          
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="考试名称">
                            <el-input v-model="formInline.ExamName" :maxlength="12" placeholder="请输入考试名称" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" @click="onSubmit('formInline')">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button @click="goToAddExam">添加考试</el-button>
                </div>
            </div>
            <el-table :data="dataApply" style="width: 100%" border @selection-change="handleSelectionChange" v-loading="loading" ref="multipleTable">

                <el-table-column prop="sExamName" align="center" label="考试名称">
                    <template scope="scope">
                        <span class="link-src" @click="btnView(scope.row)">{{scope.row.sExamName | isNull}}</span>  
                    </template>
                </el-table-column>
                <el-table-column align="center" label="考试日期" min-width="190">
                    <template scope="scope">
                        <span>{{scope.row.sStartDate && scope.row.sEndDate ? scope.row.sStartDate.substring(0, scope.row.sStartDate.length-8) + '~' + scope.row.sEndDate.substring(0, scope.row.sStartDate.length-8): '--'}}</span>  
                    </template>
                </el-table-column> 
                 <el-table-column  align="center" label="考场">
                    <template scope="scope">
                        <span>{{scope.row.isExamRoom=='1'?'已设置':scope.row.isExamRoom=='0'?'未设置':'--'}}</span>  
                    </template>
                </el-table-column>
                 <el-table-column  align="center" label="考试科目">
                    <template scope="scope">
                        <span>{{scope.row.isSubject=='1'?'已设置':scope.row.isSubject=='0'?'未设置':'--'}}</span>  
                    </template>
                </el-table-column>
                 <el-table-column  align="center" label="考试注意事项" min-width="130">
                    <template scope="scope">
                        <span>{{scope.row.isAttention=='1'?'已设置':scope.row.isAttention=='0'?'未设置':'--'}}</span>  
                    </template>
                </el-table-column>

                <el-table-column prop="sCreateTime" align="center" label="创建时间" min-width="150">
                    <template scope="scope">
                        <span>{{scope.row.sCreateTime ? scope.row.sCreateTime.substring(0, scope.row.sCreateTime.length-3): '--'}}</span>  
                    </template>
                </el-table-column> 

                <el-table-column align="center" label="操作" width="250">
                    <template scope="scope">    
                        <el-button type="text" class="btn-success" :disabled="disabledEdit(scope.row)" 
                        @click="edited(scope.row.pId)">设置</el-button>  
                        <el-button type="text" class="btn-success" @click="deleteRow(scope.row.pId)">删除</el-button>
                    </template>
                </el-table-column>           
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
        <createExam @addExamState="addExamState" v-if="addExamMain.dialogFormVisible" :addExamMain="addExamMain"></createExam>
        
    </div>
</template>

<script>
import TableLayout from 'components/TableLayout';
import {pageWisdomExam, deleteWisdomExam} from 'api/wisdom';
import school from 'components/SchoolClasss/school';
import createExam from './createExam';
import { mapState, mapActions, mapGetters } from 'vuex';
import moment from 'moment';
export default{
    components: {TableLayout, school, createExam},
    data() {
        return {
            formInline: {// form表单数据
                ExamName: ''    
            },

            addExamMain: {
                dialogFormVisible: false,
                className: '',
                schoolType: ''
            },
            dataApply: [{}],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            loading: false,
            rules: {}
        }
    },
    filters: {
        filterCreateTime(val) {
            return val.substring(0, val.length-3); 
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        }),
        ...mapGetters([
            'schoolId'
        ])
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },
    // 初始化
    created() {
        this.searchFetchData();
    },
    
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        addExamState(val) {
            this.searchFetchData();
        },
        // 删除
        deleteRow(id) {
            this.$confirm('是否确认删除', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                deleteWisdomExam(id).then(response => {
                    if (response.data.status==200) {
                        this.searchFetchData();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    } 
                });  
            }).catch((e) => {       
                // console.log(e)
            });
        },
        disabledEdit(row) {
            if (row.sEndDate) {
                let day = new Date();
                if (Date.parse(row.sEndDate.substr(0, 10)) < Date.parse(moment(day).format('YYYY-MM-DD'))) {
                    return true;
                } else {
                    return false;
                }
            }
        },
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        },
        // 查询列表
        searchFetchData() {
            this.loading = true;
            pageWisdomExam(this.schoolId, this.formInline.ExamName, this.listQuery.page, this.config.pageSize).then(response => {              
                this.dataApply = response.data.content === null ? [{}] : response.data.content.list;
                this.listQuery.total = response.data.content.pagination.total;
                this.loading = false;    
            });
        },
        // 添加考试按钮
        goToAddExam() {
            this.addExamMain.dialogFormVisible = true;
        },

        // 表单查询
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.searchFetchData();
                }
            });
        },

        // 查看
        btnView(obj) {
            this.$router.push({ path: `/examinationMode/checkExam/${obj.pId}`});
        },

        // 编辑
        edited(pid) {
            this.$router.push({path: `/examinationMode/examinationEdit/${pid}`});
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    label{
        text-align:left;
    }  
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .btnPosition {
        float:right;
    }
}
</style> 